@import "../shared/helper";

.home {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #000411;
    color: white;
    font-size: px(16);

    header {
        height: px(99);
        background-size: cover;
        width: px(2420);
        margin: 0 auto;
        position: relative;

        .time {
            position: absolute;
            left: 55%;
            top: 75%;
            font-size: px(22);
            color: #0b57fa;
            text-shadow: 0 0 3px rgba($color: #0b57fa, $alpha: 1.0);
        }
    }

    footer {
        height: px(70);
        margin: px(20) 0 0 1px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #0d0e31;
        border-top: 1px solid #0d2d59;
    }

    main {
        margin: 0 auto;
        width: px(2420);
        flex: 1;
        display: grid;
        grid-template: "box1 box2 box4 box5"755fr "box3 box3 box4 box5"363fr / 366fr 361fr 811fr 747fr;
        grid-column-gap: px(26);
        grid-row-gap: px(26);
        padding: px(30) px(24) 0 px(24);

        .bordered {
            border: 1px solid #0764bc;
            border-radius: 4px;
            position: relative;
            box-shadow: 0 0 2px 0 #0f3361,
                inset 0 0 2px 0 #0f3361;
            background-color: #0f113a;

            &::before {
                pointer-events: none; // 用户在开发工具中不会默认选中before
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                // border: 1px solid red;
                box-shadow:
                    21px 0 0 -20px #0f3361,
                    -21px 0 0 -20px #0f3361,
                    0 21px 0 -20px #0f3361,
                    0 -21px 0 -20px #0f3361,
                    9px 0 0 -9px #0f336a,
                    -8px 0 0 -8px #0f336a,
                    0 -5px 0 -5px #0f336a,
                    0 6px 0 -6px #0f336a;
            }
        }

        .管辖统计,
        .破获排名,
        .发案分析,
        .案发时段,
        // .战果,
        .籍贯,
        .年龄段,
        .案发类型,
        .案发街道,
        .作案手段 {
            height: px(315);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;

            h2 {
                flex-shrink: 0;
                font-size: px(22);
                line-height: px(22);
                border: 1px solid #0b4f95;
                border-bottom-left-radius: 6px;
                border-bottom-right-radius: 6px;
                padding: px(10) px(28);
                text-shadow: 0 0 px(3) white;
            }

            .charts {
                width: 100%;
                flex: 1;
                display: flex;
            }

            .chart {
                flex: 1;
                width: 100%;
            }

            &-图1,
            &-图2,
            &-图3 {
                display: flex;
                flex-direction: column;
                flex: 1;

                .legend {
                    height: px(40);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-wrap: wrap;

                    >span {
                        display: inline-block;
                        width: px(16);
                        height: px(10);
                        border-radius: px(2);
                        margin: 0 px(10);

                    }

                    .male {
                        background: #33a4fa;
                    }

                    .female {
                        background: #8d70f8;
                    }
                }
            }

            &-图1,
            &-图2 {
                width: px(290);
                display: flex;
                flex-direction: column;
                flex-shrink: 0;
                justify-content: center;
                padding-right: px(10);

                .chart {
                    flex: 1;
                    display: flex;
                    position: relative;
                    justify-content: center;

                    .main {
                        flex: 1;
                        // border: 1px solid red;
                    }

                    .text {
                        position: absolute;
                        left: 46%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        color: #33a4fa;
                        font-size: px(40);
                        text-shadow: 0 0 px(20) #33a4fa;
                        font-weight: bold;
                    }
                }

                .legend {
                    justify-content: center;

                }
            }

        }

        .section1 {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            grid-area: box1;


            .破获排名 {
                height: px(423);

                .legend {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    width: 100%;
                    padding: 0 px(20) px(10);

                    >.first,
                    >.second {
                        display: inline-block;
                        width: px(18);
                        height: px(12);
                        background: red;
                        margin: 0 px(10);
                    }

                    .first {
                        background: rgb(31, 50, 250);
                        background: linear-gradient(94deg, rgba(31, 50, 250, 1) 0%, rgba(11, 153, 251, 1) 100%);
                    }

                    .second {
                        background: rgb(185, 42, 232);
                        background: linear-gradient(94deg, rgba(185, 42, 232, 1) 0%, rgba(98, 110, 222, 1) 100%);
                    }
                }
            }
        }

        .section2 {
            grid-area: box2;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .发案分析,
            .案发时段 {
                height: px(365);
            }
        }

        .战果,
        .作案 {
            padding: 0 px(24);

            table {
                width: 100%;
                table-layout: fixed;
                margin-top: px(25);
                border-collapse: collapse;
                text-align: center;

                th,
                td {
                    border: 1px solid #1a3671;
                }

                thead {
                    th {
                        height: px(70);
                        box-shadow: inset 0 0 px(60) 0 #1f3d85;
                    }
                }

                tbody {
                    td {
                        height: px(50);
                        width: px(84);
                        background: #1c2456;
                    }

                }
            }
        }

        .作案 {
            >table {
                tbody {
                    td {
                        height: px(26);
                    }
                }
            }
        }

        .section3 {
            grid-area: box3;

            table {
                margin-top: px(38);
                border-collapse: collapse;

                th,
                td {
                    border: 1px solid #1a3671;
                }

                thead {
                    th {
                        height: px(70);
                        box-shadow: inset 0 0 px(60) 0 #1f3d85;
                    }
                }

                tbody {
                    td {
                        height: px(50);
                        width: px(84);
                        background: #1c2456;
                    }

                }
            }
        }

        .section4 {
            grid-area: box4;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .籍贯 {
                height: px(753);
                background-color: transparent;

                .wrapper {
                    flex: 1;
                    display: flex;
                    width: 100%;
                    flex-direction: column;
                    position: relative;

                    .chart {
                        flex: 1;
                    }

                    .legend {
                        position: absolute;
                        top: px(40);
                        left: px(20);
                        display: flex;
                        align-items: center;
                        font-size: px(22);
                        padding: px(20) px(10) px(20) 0;
                        border-radius: 0;

                        .icon {
                            margin: 0 px(10);
                            display: inline-block;
                            width: px(16);
                            height: px(16);
                            border-radius: 0;
                        }
                    }

                    .notes {
                        position: absolute;
                        right: px(10);
                        bottom: px(10);
                        letter-spacing: px(5);
                    }
                }

            }

            .年龄段 {
                height: px(363);
                display: flex;
                flex-direction: column;

                .charts {
                    padding: px(30);
                }

                &-图3 {
                    border: 1px solid #08397d;
                    display: flex;

                    h3 {
                        font-size: px(20);
                        color: #7ab6db;
                        margin-top: px(6);
                    }
                }
            }
        }

        .section5 {
            grid-area: box5;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .row1 {
                height: px(317);
                display: flex;

                .charts {
                    padding: px(30);
                    display: flex;

                    .案发类型-图1 {
                        flex: 1;

                        // background:red;
                        .a {
                            display: flex;
                            height: px(170);

                            // background-color: red;
                            .c {
                                flex: 1;
                            }
                        }

                        .legend {
                            height: px(2);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-wrap: wrap;

                            >span {
                                display: inline-block;
                                width: px(16);
                                height: px(10);
                                border-radius: px(2);
                                margin: 0 px(10);
                            }
                        }
                    }
                }
            }

            .row2 {
                height: px(317);

            }

            .row3 {
                height: px(455);
            }
        }
    }
}